<template>
  <div class="home-container">
    <ul
      :style="{
        transform: `translateY(${-index * 100}vh)`,
      }"
    >
      <li v-for="(item, index) in refData.data" :key="index">
        <CarouselItem :carouselItem="item"></CarouselItem>
      </li>
    </ul>
    <div class="icons">
      <span
        v-for="(item, itemIndex) in refData.data"
        @click="() => changeMoveIndex(itemIndex)"
        :class="{ select: itemIndex === index }"
        :key="itemIndex"
      ></span>
    </div>
    <div
      class="icon icon-up"
      v-if="index !== 0"
      @click="() => changeMoveIndex(index - 1)"
    >
      <IconFon icon="arrowUp" />
    </div>
    <div
      class="icon icon-down"
      v-if="index !== refData?.data?.length - 1"
      @click="() => changeMoveIndex(index + 1)"
    >
      <IconFon icon="arrowDown" />
    </div>
  </div>
</template>

<script>
import { getRefData, setTitle } from "@/composition/getData";
import { getBanner } from "@/api/home.js";
import CarouselItem from "./components/CarouselItem.vue";
import IconFon from "@/components/IconFon/index.vue";
import { ref } from "vue";

export default {
  setup() {
    setTitle();
    const index = ref(1);
    function changeMoveIndex(newIndex) {
      index.value = newIndex;
    }
    return {
      refData: getRefData(getBanner),
      changeMoveIndex,
      index,
    };
  },
  components: {
    CarouselItem,
    IconFon,
  },
};
</script>

<style lang="less" scoped>
@import url("@/style/center.less");
@import url("@/style/var.less");

.home-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;

  ul {
    height: 400vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: 0.5s;

    li {
      width: 100%;
      height: 100vh;
    }
  }

  .icons {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 20px;
    left: auto;
    transform: translateY(-50%);

    span {
      width: 10px;
      height: 10px;
      background-color: #333;
      border-radius: 50%;
      display: inline-block;
      margin: 3px 0;
      cursor: pointer;
      border: 1px solid #fff;

      &.select {
        background-color: #fff;
      }
    }
  }

  .icon {
    .self-center();
    transform: translateX(-50%);
    @gap: 25px;
    width: 30px;
    height: 30px;
    color: @gray;
    @jump: 5px;
    cursor: pointer;

    i {
      font-size: 30px;
    }

    &.icon-down {
      bottom: @gap;
      top: auto;
      animation: icon-downmoved 2s infinite;
    }

    &.icon-up {
      top: @gap;
      animation: icon-upmoved 2s infinite;
    }

    @keyframes icon-upmoved {
      0% {
        transform: translate(-50%, -@jump);
      }

      50% {
        transform: translate(-50%, @jump);
      }

      100% {
        transform: translate(-50%, -@jump);
      }
    }

    @keyframes icon-downmoved {
      0% {
        transform: translate(-50%, @jump);
      }

      50% {
        transform: translate(-50%, -@jump);
      }

      100% {
        transform: translate(-50%, @jump);
      }
    }
  }
}
</style>
